<template>
	<view class="address">
		<view class="address-top">
			<view :class="{'add-name': address.isDefault}">{{address.name}}</view>
			<view class="add-mobile">{{address.tel}}</view>
			<view class="is-defaul" v-show="address.isDefault">默认</view>
		</view>
		<view class="address-bottom">
			{{detailAddress}}
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			// addName:{
			// 	type:String,
			// 	default(){
			// 		return 'haha'
			// 	}
			// },
			// addMobile:{
			// 	type:String,
			// 	default(){
			// 		return '11110001111'
			// 	}
			// },
			// addDefault:{
			// 	type:Boolean,
			// 	default(){
			// 		return true
			// 	}
			// },
			// addAddress:{
			// 	type:String,
			// 	default(){
			// 		return '啊大苏打实打实大苏打实打实'
			// 	}
			// },
			// isActive:{
			// 	type:Boolean,
			// 	default(){
			// 		return true
			// 	}
			// },
			address:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		computed:{
			detailAddress(){
				let city = this.address.city
				let province = this.address.province
				let county = this.address.county
				let addressDetail = this.address.addressDetail
				return province+city+county+addressDetail
			}
		}
	}
</script>

<style scoped>
	.address{
		width: 100%;
	}
	.address-top{
		display: flex;
	}
	.add-name{
		color:#0C34BA;
		font-weight: bold;
	}
	.add-mobile{
		margin-left: 40rpx;
	}
	.is-defaul{
		margin-left: 40rpx;
		border: 1rpx solid #0C34BA;
		color: #FFFFFF;
		background-color: #0C34BA;
		border-radius: 50rpx;
		padding: 0rpx 20rpx;
	}
	.address-bottom{
		/* color: #9d9e9e; */
		margin-top: 20rpx;
	}
</style>
